{% load static %}


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Cache Editor for DataGrid - jQuery EasyUI Demo</title>

        <link rel="stylesheet" type="text/css" href="{% static 'easyui/easyui/themes/default/easyui.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'easyui/easyui/themes/icon.css' %}">
        <script type="text/javascript" src="{% static 'easyui/easyui/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'easyui/easyui/jquery.easyui.min.js' %}"></script>

        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

        <script type="text/javascript">
            var id;
            var columns;
            var excel_width;

            function obj2str(o){
                var r = [];
                if(typeof o == "string") {
                    return '"'+o.replace(/([\'\"\\])/g,"\\$1").replace(/(\n)/g,"\\n").replace(/(\r)/g,"\\r").replace(/(\t)/g,"\\t")+'"';
                }

                if(typeof o == "object"){
                    if(!o.sort){
                        for(var i in o)
                            r.push('"' + i + '":' + obj2str(o[i]));
                        if(!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)){
                            r.push("toString:" + o.toString.toString());
                        }
                        r = "{" + r.join() + "}"
                    }else{
                        for(var i=0; i<o.length; i++)
                            r.push(obj2str(o[i]))
                        r = "[" + r.join() + "]"
                    }
                    return r;
                }
                return o.toString();
            }

            var editIndex = undefined;

            function endEditing(){
                if (editIndex == undefined) {return true}
                if ($(id).datagrid('validateRow', editIndex)){
                    $(id).datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }

            function onClickRow(index){
                if (editIndex != index){
                    if (endEditing()){
                        $(id).datagrid('selectRow', index)
                                .datagrid('beginEdit', index);
                        editIndex = index;
                    } else {
                        $(id).datagrid('selectRow', editIndex);
                    }
                }
            }

            function save() {
                $(id).datagrid('loading');
                $(id).datagrid('acceptChanges');

                var text = obj2str($(id).datagrid('getData'))
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "/easyui/update/{{ json_data_id }}",
                    dataType: "json",
                    anysc: false,
                    data: text,
                    success: function (data, textStatus) {
                        $(id).datagrid('loaded');
                        if (data.success) {
                            //alert("Accept Success!");
                        }
                        else {
                            alert("Save Fail!");
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $(id).datagrid('loaded');
                        alert("Save Fail!");

                    }
                });
            }

            function create(v_id, v_columns){
                id = v_id;
                columns = v_columns;

                $(id).datagrid({
                    idField: columns[0].field,
                    url: '/easyui/data/{{ json_data_id }}',
                    columns: [ columns ],

                    onBeforeEdit: function(index, row){
                        row.editing = true;
                        $(id).datagrid('updateRow',{
                            index: index,
                            row:{}
                        });
                    },
                    onAfterEdit: function(index, row){
                        row.editing = false;
                        $(id).datagrid('updateRow',{
                            index: index,
                            row:{}
                        });
                    },
                    onCancelEdit: function(index, row){
                        row.editing = false;
                        $(id).datagrid('updateRow',{
                            index: index,
                            row:{}
                        });
                    }
                });

                var pager=$(id).datagrid('getPager');
                    $(pager).pagination({
                    pageNumber:1,
                    pageSize:20,
                    pageList:[10,20],
                    //beforePageText:'第',
                    //afterPageText:'页  共 {pages} 页',
                    //displayMsg:'当前显示 {from}-{to} 条记录   共 {total} 条记录 '
                });
            }

            STATIC = function(title, width, values){
                return {field:title,title:title,width:width};
            }

            TEXT = function(title, width, values){
                return {field:title,title:title,width:width,editor:'text'};
            }

            COMBOBOX = function(title, width, values){

                list = new Array();
                for (i=0; i<values.length; i++) {
                    list.push({text:values[i], value:values[i]})
                }

                return {field:title,title:title,width:width,
                    editor:{
                        type:'combobox',
                        options:{
                            valueField: 'value',
                            textField: 'text',
                            data: list,
                            required: true
                        }
                    }
                };
            }

            CHECKBOX = function(title, width, values) {
                return {field:title,title:title,width:width,
                        editor:{
                            type:'checkbox',
                            options:{
                                on: 'Y',
                                off: 'N'
                            }
                        }
                };
            }
        </script>
    </head>

    <body>
        <script>
            $(function(){
                columns = {{ columns_javascript|safe}}
                create('#datagrid', columns)
            });
        </script>

        <div class="container">
            <h2>{{ title }}</h2>
            <div class="row justify-content-md-center">

                <table id="datagrid" style="width:auto;height:auto"
                    data-options="
                        iconCls: 'icon-edit',
                        singleSelect: true,
                        rownumbers: true,
                        autoRowHeight: true,
                        pagination:true,
                        pageSize:20,
                        nowrap:false,
                        toolbar: '#tb',
                        onClickRow: onClickRow,
                    "
                >
                </table>

            </div>
        </div>

	<div id="tb" style="height:auto">
		<a id="tb_save" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="save()">Save</a>
		<a href="javascript:void(0)" class="easyui-combobox" name="dept" style="width:200px;" id="tb_filter"
           data-options="valueField:'g2', textField:'g2', method:'get', url:'/conf/combobox.json'"/>
	</div>

    </body>
</html>